<template>
  <Modal v-model="playModal"  title="视频播放"  width="900px" :mask-closable="false" :closable="true">
    <div class="videoBox1" @mouseenter="showBar" @mouseleave = "hideBar">
<!--      <video class='viewPlayerBox' @mouseenter="showBar" @mouseleave = "hideBar">
&lt;!&ndash;        <video :id="elementId" :ref="elementId"  autoplay style="text-align:left;">
          webrtc player
        </video>&ndash;&gt;
      </video>-->
      <video
        id="videoPlayer"
        ref="videoPlayer"
        class="video-js"
        @canplay="getTotalTime"
        @timeupdate="timeUpdate"
      >
      </video>


      <!-- 自定义控件 -->
      <div class="controlBar1" :style="barStyle">
        <div class="controlBtnBox1">
          <div class="btn-left1">
            <div class="btn-left-11">
              <i style="cursor: pointer" title="播放" v-show="playControls.status==0" @click="play"><Icon type="md-play" size="24"/></i>
              <i style="cursor: pointer" title="播放" v-show="playControls.status==2" @click="rePlay"><Icon type="md-play" size="24"/></i>
              <i style="cursor: pointer" title="停止" v-show="playControls.status==1" @click="stop"><Icon type="md-square" size="24"/></i>
              <i style="cursor: pointer" title="暂停" v-show="playControls.status==1" @click="pause"><Icon type="md-pause" size="24"/></i>
              <span>{{currentTime}}/{{totalTime}}</span>
              <i style="cursor: pointer" title="打开声音" v-show="playControls.audio==0" @click="openAudio"><Icon type="md-volume-off" size="24"/></i>
              <i style="cursor: pointer" title="关闭声音" v-show="playControls.audio==1" @click="closeAudio"> <Icon type="md-volume-up" size="24"/></i>
              <i style="cursor: pointer" title="音量" v-show="playControls.audio==1" @click="toShowVolumeBar"><Icon type="md-funnel" size="24"/></i>
            </div>

            <div class="btn-left-21">
            <div style="width:30px;height: 300px;background-color: #c80000">

            </div>
            </div>
          </div>
<!--          <div class="left">
            <i
              :class="[isPaused ? 'el-icon-video-play' : 'el-icon-video-pause']"
              class=" icon-size"
              @click="togglePlay()"
            >
            </i>

          </div>-->

          <div class="right1">

            <i style="cursor: pointer" title="打开对讲"><Icon type="md-mic-off" size="24"/></i>
            <i style="cursor: pointer" title="关闭对讲"><Icon type="md-mic" size="24"/></i>

            <i style="cursor: pointer" title="全屏"><Icon type="md-qr-scanner" size="24"/></i>
            <i style="cursor: pointer" title="取消全屏"><Icon type="md-contract" size="24"/></i>

<!--            <i class="el-icon-d-arrow-left icon-size" @click="back(player.currentTime())></i>
            <i class="el-icon-d-arrow-right icon-size" @click="forward(player.currentTime())></i>-->
<!--            <i class="el-icon-bell icon-size"  @click="toShowVolumeBar"></i>-->
            <div id="volumeBar" v-show="isShowVolumeBar">
              <Slider title="音量调整" v-model="volume" :max="10" :min="1" style="width:60px;"> </Slider>

<!--              <el-slider
                v-model="volume"
                vertical
                height="100px"
                @input="changeVolume"
              >
              </el-slider>-->
            </div>
          </div>
          <div class="rateBox1">
            <span @click="toShowOptions">{{ratedisplay}}</span>
            <div class="rateOptions1" v-show="isShowRateOptions">
                    <span
                      v-for="(item,index) in rateOptions"
                      :key="index"
                      @click="setPlayRate(item)"
                    >
                        {{item}}x
                    </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>
<script>
import 'video.js/dist/video-js.css';
  export default {
    name: "WebRtcPlayer",
    //接收来自父组件videoComponent的video的具体配置信息,这样可以实现对VideoPlayer组件的复用
    props:{
      options: {
        type: Object
      }
    },
    //用计算属性来实现当速率为1时，显示“倍速”
    computed:{
      ratedisplay(){
        if(this.rate == 1){
          return '倍速'
        }else{
          return this.rate + 'x'
        }
      }
    },
    data(){
      return{
        playControls:{
          status: 0,//0停止 1 播放 2 暂停
          audio: 0, //0声音关，1声音开
        },
        elementId: "webrtcplayer1",
        playModal: false,
        barStyle: {
          display : 'none'
        },
        player:null,
        //当前播放速率
        rate:1.0,
        //播放速率
        rateOptions:[2.0,1.75,1.5,1.0,0.75,0.5],
        //显示速率选项和音量选项
        isShowRateOptions:false,
        isShowVolumeBar:false,
        //音量
        volume:30,
        //是否暂停
        isPaused:true,
        //当前播放时间点和视频总时长
        currentTime:'00:00:00',
        totalTime:'00:00:00',
        //进度条的当前值，必须为number类型
        currentTimeVal:0,
        //进度条最大值，必须为number类型
        totalTimeVal:0,
        //是否在拖到进度条
        isDraging:false
      }

    },
    methods:{
      rePlay(){
        console.log("rePlay")
        this.playControls.status = 1;
      },
      play(){
        console.log("play");
        this.playControls.status = 1;
      },
      stop(){
        console.log("stop")
        this.playControls.status = 0;
      },
      pause(){
        console.log("pause");
        this.playControls.status = 2;
      },
      openAudio(){
        this.playControls.audio = 1;
      },
      closeAudio(){
        this.playControls.audio = 0;
      },
      showBar(){
        console.log("showBar")
        this.barStyle={display: 'block'}
      },
      hideBar(){
        console.log("hideBar")
        this.barStyle={display: 'none'}

      },
      openDialog: function (tab, gbServerId,deviceId, channelId, param) {
        this.playModal = true;

/*
        this.deviceInfo = {gbServerId: gbServerId,deviceId: deviceId,channelId: deviceId};
        /!** !! 表示 非null 非underfined 非'' *!/
        if (!!this.$refs.videoPlayer) {
          this.$refs.videoPlayer.pause();
        }
        this.play(param.streamInfo, param.hasAudio);
*/
      },

      createVideoPlayer(){
        this.player = this.$videoJS(this.$refs.videoPlayer,this.options)
      },
      //显示速率选项
      toShowOptions(){
        this.isShowRateOptions = !this.isShowRateOptions
      },
      toShowVolumeBar(){
        this.isShowVolumeBar = !this.isShowVolumeBar
      },
      //视频时长格式化
      timeFormat(time){
        let hour = Math.floor(time / 3600),
          minute = Math.floor((time % 3600) / 60),
          second = Math.floor(time % 60);
        hour = hour < 10 ? "0" + hour : hour;
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return `${hour}:${minute}:${second}`;
      },
      //获取视频的总时长和进度条最大值
      getTotalTime(){
        this.totalTime = this.timeFormat(this.player.duration())
        this.totalTimeVal = Math.floor(this.player.duration())
      },
      //改变速率
      setPlayRate(rate){
        this.rate = rate;
        this.player.playbackRate(rate);
        this.isShowRateOptions = false;
      },
      //控制视频的播放与暂停
      togglePlay(){
        console.log()
        this.isPaused = !this.isPaused
        if(!this.isPaused){
          this.player.play()
        }else{
          this.player.pause()
        }
      },
      //更新视频当前播放时间
      timeUpdate(){
        //如果当前正在拉到进度条，先停止更新当前播放时间，直接return结束这个函数
        //没有这一句会出现拉动进度条跳转失败的bug
        if(this.isDraging) return

        this.currentTime = this.timeFormat(this.player.currentTime())
        this.currentTimeVal = this.player.currentTime()
        //当前时间更新到等于总时长时，要改变视频的播放状态按钮
        if(this.currentTime === this.totalTime){

          this.isPaused = true
        }
      },
      //进度条拉动时更新进度条值并从拉到的位置播放
      progressUpdate(val){
        this.player.currentTime(val)
        // 虽然mouseup已经可以改变isDraging的值，但下面这句不能少，不然视频播放结束再点击播放时，进度条不会回到最开始位置
        this.isDraging = false
      },
      //改变音量
      changeVolume(val){
        this.volume = val
        //由于h5规定volum的值在0-1之间，所以这里要对获取到的val做一个处理(滑块的val是从0-100)
        this.player.volume(val / 100)
      },
      //快进
      forward(ct){
        this.progressUpdate(ct + 10)
      },
      //后退
      back(ct){
        this.progressUpdate(ct - 10)
      }
    },
    mounted(){
      this.createVideoPlayer()
    },
    beforeDestroy(){
      if(this.player){
        this.player.dispose()
      }
    }
  }
</script>
<style lang="less">
.videoBox1{
  box-sizing: border-box;
  position: relative;
  width: 800px;
  height:500px;
  background-color: rgb(73, 156, 128);
}
#videoPlayer{
  width: 100%;
  height: 100%;
  background-color: #0c0c0c;
}

.controlBar1{
  width: 90%;
  height: 55px;
  position:absolute;
  bottom: 20px;
  left: 5%;
  background-color:#817f7f5a;
  box-sizing: border-box;
  color: rgb(233, 231, 231);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.progressBar{
  //box-sizing: border-box;
  //position: relative;
  width: 100%;
  //padding: 1px;
  height: 30px;
  //background-color: #074e8c;
  //display: flex;
}
.controlBtnBox1{
  box-sizing: border-box;
  width: 100%;
  height:60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(199, 8, 8, 0.35);
  .btn-left1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .btn-left-11{
      display: flex;
      background-color: #3caf36;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .btn-left-21{
      display: flex;
      background-color: #0b54dc;
    }
  }

  .btn-right1{
    display: flex;
    flex-direction: row-reverse;
  }
}

/* 以下强行修改了el-slider样式 */
.progressBar /deep/ .el-slider__bar{
  height: 3px;
  background-color: #409EFF;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}
.progressBar /deep/ .el-slider__button{
  height: 8px;
  width: 8px;
}
.progressBar /deep/ .el-slider__runway{
  margin-top:1px;
  margin-bottom: 1px;
  height: 3px;
}
.progressBar /deep/.el-slider__button-wrapper{
  width: 28px;
  height: 33px;
}
.icon-size{
  font-size: 25px;
  cursor: pointer;
}
.left{
  padding-left:10px ;
  width: 50%;
  display: flex;
  align-items: center;
}
.left span{
  margin-left: 20px;
}
.right{
  width: 15%;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.right i{
  display: block;
}
#volumeBar{
  width: 30px;
  height: 120px;
  background-color: #817f7f5a;
  position: absolute;
  top:-150px;
  right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rateBox1{
  width: 15%;
  cursor: pointer;
}
.rateOptions1{
  width: 80px;
  height: 180px;
  background-color: #817f7f5a;
  position: absolute;
  top:-185px;
  right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.rateOptions1 span{
  display: block;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.rateOptions1 span:hover{
  background-color: #cec9c95a;
  color: #409EFF;
}

</style>

/**
"视频播放":video.play();
"视频暂停播放":video.pause();
"视频地址":video.currentSrc;
"视频总时长":video.duration;
"视频播放速率":video.playbackRate;
"是否暂停":video.paused;
"是否结束":video.ended;
"是否静音":video.muted;
"当前播放时间": video.currentTime;
"当前缓冲量":video.buffered.end(0);
"当前音量":video.volume

src: 指定视频文件的URL地址。
controls: 控制视频播放器的控制条是否显示。
autoplay: 设置视频是否自动播放。
loop: 设置视频是否循环播放。
muted: 设置视频是否静音。
poster: 设置视频封面图片的URL地址。
currentTime: 获取或设置当前视频播放的时间。
duration: 获取视频的总时长。
play(): 开始播放视频。
pause(): 暂停视频播放。
preload: 指定视频文件的预加载行为，可以设置为"auto"、“metadata”、“none”。
paused: 返回一个布尔值，表示当前视频是否暂停播放。
volume: 设置视频的音量大小。
fullScreen: 视频全屏显示。
ended: 事件在视频播放结束时触发。
buffered: 返回一个TimeRanges对象，用来表示视频已经加载的缓冲范围。
played: 返回一个TimeRanges对象，用来表示视频已经播放的时间范围。
seekable: 返回一个TimeRanges对象，用来表示视频可以被快进的时间范围。
currentSrc: 获取当前视频播放的URL地址。
*/
